<template>
  <div class="app-container table-app-container">
    <div class="fixed-table">
      <ActionBar v-if="!forSelection" />
      <AssetTable
        :columns="insideColumns"
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight"
        :multiple-selected="false"
        class="fixed-table-table"
        @page-change="onPageChange"
        @sort-change="onSortChange"
        @selection-change="onSelectionChange"
        @open-drawer="onOpenDrawer"
        @close-filter-item="onCloseFilterItem"
      >
        <template v-for="column in insideColumns">
          <el-table-column v-if="column.display" :key="column.key" :label="column.title" :prop="column.key" :sortable="column.sortable">
            <template slot-scope="scope">
              <column-render :render="column.render" :row="scope.row" :column="column" />
            </template>
          </el-table-column>
        </template>
      </AssetTable>
    </div>
    <FormDialog
      ref="filterDialog"
      :drawer="true"
      width="40%"
      title="筛选"
      cancel-text="重置"
      confirm-text="筛选"
      :show.sync="drawerFormVisible"
      @on-ok="onSearch"
      @on-cancel="onReset"
    >
      <table-filter ref="filterForm" :filter="filter" />
    </FormDialog>
  </div>
</template>

<script>

import TableFilter from './components/tableFilter'
import ActionBar from './components/actionBar'
import AssetTable from '@neu/biz-core/components/AssetTable'
import databind from '@neu/biz-core/mixins/databind'
import { formatDate } from '@neu/biz-core/utils/utils'
import FormDialog from '@neu/biz-core/components/FormDialog'

const formItemView = {

}

import {
  page,
  remove
} from '@neu/dcam-ui/api/stock'

export default {
  name: 'StockQueryPage',
  components: {
    TableFilter,
    AssetTable,
    ActionBar,
    FormDialog
  },
  // 加入混入，使表格混入更多的api操作
  mixins: [databind],
  props: {
    forSelection: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      r: page,
      d: remove,
      formItemView: {
        ...formItemView
      },
      drawerFormVisible: false,
      insideColumns: [{
        title: '备品备件分类',
        key: 'spareTypeName',
        display: true
      },
      {
        title: '货品名称',
        key: 'goodsFileName',
        display: true
      },
      {
        title: '规格型号',
        key: 'specification',
        display: true
      },
      {
        title: '数量',
        key: 'number',
        display: true
      },
      {
        title: '存放库房',
        key: 'storehouseName',
        display: true
      },
      {
        title: '批次',
        key: 'batch',
        display: true
      },
      {
        title: '供应商',
        key: 'manufacturerName',
        display: true
      },
      {
        title: '单价',
        key: 'unitPrice',
        display: true
      },
      {
        title: '应用资产分类',
        key: 'applyAssetTypeName',
        display: true
      },
      {
        title: '创建时间',
        key: 'createTime',
        render: (h, params) => { return h('span', formatDate(params.row.createTime)) },
        display: true
      },
      {
        title: '更新时间',
        key: 'updateTime',
        render: (h, params) => { return h('span', formatDate(params.row.updateTime)) },
        display: true
      }
      ]
    }
  },
  methods: {
    onOpenDrawer() { // 筛选-打开抽屉
      this.drawerFormVisible = true
    },
    onSearch() { // 筛选-筛选
      this.formItemView = this.$refs.filterForm.formItem
      this.$refs.filterForm.search()
      this.drawerFormVisible = false
    },
    onReset() { // 筛选-重置
      this.$refs.filterForm.reset()
      this.drawerFormVisible = false
    },
    onCloseFilterItem(item) {
      this.$refs.filterForm.onFilterItemClose(item)
    }
  }
}
</script>
